<style>
    @keyframes showDialog {
        from {opacity: 0;margin-top: 30px;}
        to {opacity: 1;margin-top: 0px;  }
    }

    @keyframes hideDialog {
        from {opacity: 1;margin-top: 0px;}
        to {opacity: 0;margin-top: 30px;}
    }
    .show { animation: showDialog 0.7s ease 1 forwards;}
    .hide { animation: hideDialog 0.7s ease 1 forwards; }
    .page {background-color: #fff}
    .network-wrap {min-height: 600px;padding-top: 70px;padding-bottom: 70px;background: url("/_hongyanche/material/networkbg.jpg") no-repeat; background-position: center center;  background-size: cover; }
    .network-wrap .network-main{background-color: #fff;padding-bottom: 50px;}
    .network-wrap .network-header {height: 87px; line-height: 87px;}
    .network-header h2{font-size: 24px; text-align: center; color: blue; border-bottom: 1px solid #dddddd;}
    .network-ad {height: 150px; margin: 5px auto 0 auto; background-color: #8e9fb4; color: #ffffff;}
    .network-wrap .select{margin: 15px;color: #4f5864;font-size: 14px;}
    .select select{width: 150px;border: 1px solid #dedede;height: 29px;line-height: 29px;}
    .service-content{padding: 0 15px 0 30px;display: flex; margin-top: 24px; position: relative;}
    .service-content .service-addr{width: 374px; max-height: 512px; border: 1px solid #dbdbdb; overflow-x: hidden; overflow-y: scroll;}
    .service-content .service-item {color: #4f5864;padding: 10px;font-size: 12px; }
    .service-item p{line-height: 1.7;color: #4f5864;}
    .service-map{flex: 1; height: 512px; padding: 0 15px;}
    .mobile-map-bar{display: none;}
    #mapDetail {position: absolute;height: 100%;right: 0; width: 290px; overflow-x: hidden; overflow-y: scroll;}
    .mapWrap{position: relative; width: 100%; height: 100%;}
    .mapWrap .input-box {position: absolute;top: 0; border-radius: 2px 0 0 2px;background: #fff;box-shadow: 1px 2px 1px rgba(0,0,0,.15); display: none;}
    .mapWrap .input-box input {box-sizing: border-box;border: 0;padding: 9px 0;border-left: 10px solid transparent;border-right: 27px solid transparent;line-height: 20px;font-size: 16px;height: 38px;color: #333;position: relative;border-radius: 2px 0 0 2px;}
    .mapWrap .input-box .btn{pointer-events: auto;background-color: #3385ff;color: white;width: 57px;height: 38px;float: right;border: 0;padding: 0;cursor: pointer;border-radius: 0 2px 2px 0;box-shadow: 1px 2px 1px rgba(0,0,0,.15)}
    @media(max-width: 354px) {
        .selectel:nth-child(3) {
            margin-top: 10px;
        }
    }
    @media (max-width: 1000px) {
        .container{height: 100%;position: absolute;width: 100%;}
        .network-main{height:100%;width: 100% ;position: fixed;}
        .network-wrap{padding: 0; background: none;}
        .network-wrap .select{display: flex; flex-wrap: wrap; position: relative;}
        .select select {width: 81px;}
        .select label{flex: 1 !important;}
        #confirmWrap{display: none !important; opacity: 0;}
        .select label span {display: none !important;}
        .service-content{padding: 0; display: flex; flex-direction: column;margin-top: 0px !important; position: initial !important;}
        .service-content .service-addr{width: 100%;position: fixed;height: 100%;background-color: #f3f5f6; max-height: 78%;}
        .service-map{display: none;height: 300px; padding: 0;}
        .mobile-map-bar{display: none; position: absolute; width: 100%; height: 200px;padding: 20px; ;bottom: 0;background: #fff;box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);}
        .mobile-map-bar a {display: block;color: #2a85a0;}
        #mapDetail{display: none;}
    }
</style>

<div class="network-wrap">
    <div class="container">
        <div class="network-main">
            <div class="network-header">
                <h2>全国网点查询</h2>
            </div>
            <!--<div class="network-ad">-->
            <!--<h2>广告位</h2>-->
            <!--</div>-->
            <div class="select bc-district">
                <label>
                    <span>请选择类别：</span>
                    <select id="maintain-class" class="selectel">
                    </select>
                </label>
                <label>
                    <span>请选择所在地：</span>
                    <select class="selectel" id="a" info="1" name="province" placeholder="请输入所在省市"></select>
                </label>
                <label>
                    <select class="selectel" id="b" info="1" name="city" placeholder="请输入所在市区"></select>
                </label>
                <!--<label>-->
                <!--<select class="selectel" id="c" info="1" name="district" placeholder="请输入所在区县"></select>-->
                <!--</label>-->
            </div>
            <div class="service-content">
                <div class="service-addr">
                    <!--<div class="service-item">-->
                    <!--<p><a href="javascript:void (0)">滨州华达汽车销售有限公司</a></p>-->
                    <!--<p>0543-3267555</p>-->
                    <!--<p>地址：山东省滨州市渤海五路东方红路口北两公里路西</p>-->
                    <!--</div>-->
                </div>
                <div class="mobile-map-bar">
                    <h3>请选择地图导航</h3>
                    <a href="javascript:void(0)" id="aliMap">高德地图</a>
                     <a href="javascript:void(0)" id="baiduMap">百度地图</a>
                </div>
                <div class="mapWrap">
                    <div class="service-map" id="allmap"></div>
                    <div class="input-box" id="confirmWrap">
                        <input type="text" id="confirmInput" placeholder="请输入你的所在地">
                        <button class="btn" id="confirm">确认</button>
                    </div>
                </div>
                <div id="mapDetail"></div>

            </div>
        </div>
    </div>
</div>
<script>
    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                qq: u.match(/\sQQ/i) == " qq" //是否QQ
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    };
    ;(function (w, u) {
        var maintainClass = $('#maintain-class');
        var content = $('.service-addr');
        // 获取数据
        function getData() {
            $.ajax({
                url: '/maintain/station_list',
                type: 'POST',
                data: {
                    cn_code: maintainClass.val()
                },
                xhrFields:{
                    withCredentials:true
                },
                success: function (data) {
                    var datas = data.data.list;
                    if(!data.data.list) {
                        content.html('暂无数据');
                        map('116.3972', '39.9096');
                        return;
                    }
                    content.html(' ');
                    datas.forEach(function (item, index) {
                        content.append("<div class='service-item js-map'>" +
                            "<p><a href='javascript:void(0)' data-id='"+item.cust_code+"' data-addr='"+item.company_address+"' data-lat='"+item.lat+"' data-lng='"+item.lng+"'>"+item.cust_name+"</a></p>"+"<p> 电话："+"<span class='tel'>"+item.company_tel+"</span>"+"</p>"+"<p> 地址："+"<span class='addr'>"+item.company_address+"</span>"+"</p>"+ "</div>")
                    });
                }
            })
        }
        // init
        $.ajax({
            url: '/maintain/label_list',
            type: 'GET',
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                map('116.3972', '39.9096');
                var datas = data.data.list;
                datas.forEach(function (item, index) {
                    maintainClass.append('<option value="'+item.cn_code+'">' + item.cn+'</option>')
                });
                getData();
                DISTRICT.load('.bc-district');
                $('select#a').find('option[text="北京"]').attr('selected', true);
            }
        });

        $('body').on('change', '.selectel', function () {
            var maintainClassValue = $('#maintain-class').val();
            var a = $('#a').val();
            var b = $('#b').val();
            var c = $('#c').val();
            $.ajax({
                url: '/maintain/station_list',
                type: 'POST',
                data: {
                    province: a,
                    city: b,
                    area: c,
                    cn_code: maintainClassValue
                },
                xhrFields:{
                    withCredentials:true
                },
                success: function (data) {
                    var datas = data.data.list;
                    if (!data.data.list) {
                        map('116.3972', '39.9096');
                        content.html('暂无数据');
                        return;
                    }
                    content.html(' ');
                    datas.forEach(function (item, index) {
                        content.append("<div class='service-item js-map'>" +
                            "<p><a href='javascript:void(0)'  data-id='"+item.cust_code+"' data-addr='"+item.company_address+"' + data-lat='"+item.lat+"' data-lng='"+item.lng+"'>"+item.cust_name+"</a></p>"+"<p> 电话："+"<span class='tel'>"+item.company_tel+"</span>"+"</p>"+"<p> 地址："+"<span class='addr'>"+item.company_address+"</span>"+"</p>"+ "</div>")
                    })
                }
            });
        });
        /**
         * @param {String} lng 目的地的经度
         * @param {String} lat 目的地的纬度
         * @param {String} o 目的地详细地址
         * */
        function map(lng, lat, o) {
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(lng, lat);
            map.centerAndZoom(point, 16);
            map.enableScrollWheelZoom();

            var myIcon = new BMap.Icon("/_hongyanche/material/biaozhu.png",new BMap.Size(30,30),{
                anchor: new BMap.Size(10,10)
            });

            var marker=new BMap.Marker(point,{icon: myIcon});
            map.addOverlay(marker);
            if (!o) {
                return;
            }
            var licontent="<b>"+o.n+"</b><br>";
            licontent+="<span><strong>地址：</strong>"+o.a+"</span><br>";
            licontent+="<span><strong>电话：</strong>"+o.t+"</span><br>";
            var opts = {
                width : 280,
                height: 100,
            };
            var  infoWindow = new BMap.InfoWindow(licontent, opts);
            marker.openInfoWindow(infoWindow);
            marker.addEventListener('click',function(){
                marker.openInfoWindow(infoWindow);
            });

            ////////////////
            var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "mapDetail", autoViewport: true}});
            var addr;
            $('body').on('click', '#confirm', function(){
                addr = $('#confirmInput').val();
                driving.search(addr, o.a);
            });
        }
        //关闭
        $('body').on('touchmove', '.service-addr', function () {
            $('.mobile-map-bar').addClass('hide').removeClass('show').hide();
        });
        $('body').on('click', '.js-map', function (event) {
            var name = $(this).text();
            var addr = $(this).attr('data-addr');
            var lng = $(this).attr('data-lng');
            var lat = $(this).attr('data-lat');
            event.stopPropagation();
            if (browser.versions.mobile||browser.versions.android||browser.versions.ios) {
                $('#confirmWrap').hide();
                $('.mobile-map-bar').show().addClass('show').removeClass('hide');
                $('.mobile-map-bar').on('click', '#aliMap', function () {
                    if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                        w.location.href= 'http://uri.amap.com/marker?position='+lat+','+lng+'&name=' +name +'&callnative=1';
//                            w.location.href = 'iosamap://navi?sourceApplication=appname&amp;poiname='+addr+'&amp;lat='+lat+'&amp;lon='+lng+'&amp;dev=1&amp;style=2'
                    } else if (/(Android)/i.test(navigator.userAgent)) {
//                            w.location.href = 'androidamap://navi?sourceApplication=appname&amp;poiname='+addr+'&amp;lat='+lat+'&amp;lon='+lng+'&amp;dev=1&amp;style=2'
                        w.location.href= 'http://uri.amap.com/marker?position='+lat+','+lng+'&name=' +name +'&callnative=1';
                    }
                });
                $('.mobile-map-bar').on('click', '#baiduMap', function () {
                    w.location.href = 'http://api.map.baidu.com/marker?location='+lng+','+lat+'&title=目的位置&content='+addr+'&output=html'
                });
            } else {
                $('#confirmWrap').show();
                var addr = $(this).find('p > span.addr').text();
                var tel = $(this).find('p > span.tel').text();
                var cName = $(this).find('a').text();
                if (!addr) {
                    return
                }
                var o = {
                    a: addr,
                    t: tel,
                    n: cName
                };
                var a = 'http://api.map.baidu.com/geocoder/v2/?address='+addr+'&output=json&ak=zInrkldrOGmWFcCTSifNBRYfKCDtz199';
                $.ajax({
                    url: a,
                    dataType: 'jsonp',
                    type: 'GET',
                    jsonp: 'callback',
                    success: function (data) {
                        if (data.status) {
                            return
                        }
                        var lng = data.result.location.lng,
                            lat = data.result.location.lat;
                        map(lng, lat, o);
                    },
                    error: function (err) {
                        TOAST.wran('网络错误', ' ', 1);
                    }
                });
            }
        });
    })(window, undefined);
    $('.visible-xs').addClass('hidden');

    function autoInputAddr() {
        function G(id) {
            return document.getElementById(id);
        }

        var map = new BMap.Map("allmap");
//            map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。

        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "confirmInput"
                ,"location" : map
            });

        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        });
    }
    autoInputAddr();
</script>